<script setup>
import { ref } from 'vue';
let props = defineProps({
    control: Object,
    model: Object,
})
let showPicker = ref(false);
const onConfirm = (value) => {
    props.model[props.control.id] = value.value;
    showPicker.value = false;
};
let columnsFieldNames = {
    text: props.control.props.showOptionLabel ? 'label' : 'value'
}
</script>

<template>
    <van-field
        :name="control.id"
        v-model="model[control.id]"
        is-link
        readonly
        :label="control.props.placeholder"
        :placeholder="control.props.placeholder"
        @click="showPicker = true"
        :rules="control.rules"
        :required="control.rules[0].required"
    />
    <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
            :columns="control.props.options"
            @cancel="showPicker = false"
            @confirm="onConfirm"
            :columns-field-names="columnsFieldNames"
        />
    </van-popup>
</template>
